@tab-shadow: 0px 0 8px rgba(0, 0, 0, 0.08);
@padding-left-right: 6px;

.slide-tab-bar-container {
    overflow: hidden;
    max-width: calc(100% - 112px);

    .slide-tab-bar {
        user-select: none;

        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;

        padding: var(--padding-xs) @padding-left-right;

        transition: box-shadow 0.2s;
    }
}

/**
Tab Item, Put outside to be compatible with drag styles
*/
.slide-tab-item {
    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;

    box-sizing: border-box;
    margin: 0 var(--margin-xxs);

    font-size: var(--font-size-xs);
    line-height: 16px;
    color: rgb(var(--grey-1000));

    border-radius: var(--border-radius-base);

    &:not(.slide-tab-active):hover {
        background-color: rgb(var(--bg-color-hover));
    }

    .slide-tab-div {
        box-sizing: border-box;
        padding: var(--padding-xs) var(--padding-sm);

        white-space: nowrap;

        border: 2px solid transparent;
        border-radius: var(--border-radius-base);
        display: flex;
        align-items: center;

        &-edit {
            cursor: text;
            outline: none;

            &::selection {
                color: rgb(var(--color-white));
                background-color: rgb(var(--primary-color));
            }
        }
    }
}

.slide-tab-active {
    font-weight: 700;
    color: rgb(var(--primary-color));

    background-color: rgb(var(--bg-color-secondary));
    box-shadow: @tab-shadow;

    transition: box-shadow 0.2s;
    display: flex;
    justify-content: center;
}

.slide-tab-item-dropdown {
    user-select: none;
    min-width: auto !important;
}
